<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">

<style type="text/css">
/* 限制文章详情中图片的大小，最大宽度为400px */
 img {
	max-width:400px;
}

</style>
</head>
<body>
	<div class="container">
	
			<form action="/admin/users" method="post">
			
				用户名: <input type="text" name="username" value="${user.username }">
				用户状态：
				<input type="radio" name="locked" value="0" ${user.locked==0?"checked":"" }>正常
				<input type="radio" name="locked" value="1" ${user.locked==1?"checked":"" }>锁定
				<input type="radio" name="locked" value="2" ${user.locked==null||user.locked==2?"checked":"" }>全部
				<input type="button" onclick="query()" value="查询">			
			</form>
			
			<table class="table">
				<tr>
					<td>序号</td>
					<td>用户名</td>
					<td>性别</td>
					<td>出生日期</td>
					<td>注册日期</td>
					<td>是否锁定</td>
				</tr>
				
				<c:forEach items="${info.list}" var="u" varStatus="i">
					<tr>
						<td>${i.count }</td>
						<td>${u.username }</td>
						<td>${u.gender==0?"女":"男" }</td>
						<td><fmt:formatDate value="${u.birthday }" pattern="yyyy-MM-dd"/></td>
						<td><fmt:formatDate value="${u.created }" pattern="yyyy-MM-dd"/></td>
						<td>
							<c:if test="${u.locked==0 }">
								<input type="button" class="btn btn-success" onclick="updateLocked('${u.id}',this)" value="正常">
							</c:if>
							<c:if test="${u.locked==1 }">
								<input type="button" class="btn btn-danger" onclick="updateLocked('${u.id}',this)" value="锁定">
							</c:if>
						</td>
					</tr>
				</c:forEach>
			</table>
		
		<!-- 加载分页页面 -->
		<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
	</div>
</body>
<script type="text/javascript">
	//分页
	function goPage(pageNum){
		//location="/admin/users?pageNum="+pageNum+ "&" + $("form").serialize();
		
		$("#center").load("/admin/users?pageNum="+pageNum + "&" + $("form").serialize());
	}
	
	//查询用户数据
	function query(){
		$("#center").load("/admin/users?"+ $("form").serialize());
	}
	
	//修改锁定状态
	function updateLocked(id,obj){
		//获取按钮显示的文字，根据文字，获取要修改的锁定状态
		var locked = $(obj).val()=="锁定"?0:1;
		
		//使用ajax修改
		$.post(
			"/admin/updateLocked",
			{id:id,locked:locked},
			function(result){
				
				if(result){
					//修改按钮的文字和样式
					if($(obj).val()=="锁定"){
						//将文字修改
						$(obj).val("正常");
						
						//修改按钮样式
						$(obj).removeClass("btn-danger");
						$(obj).addClass("btn-success");
					}else{
						
						//如果原来不是热门
						$(obj).val("锁定");
						
						//修改按钮样式
						$(obj).removeClass("btn-success");
						$(obj).addClass("btn-danger");
					}
					
				}else{
					alert("修改失败");
				}
			}
		)
	}
	
</script>
</html>

